Fields: Configure Custom Page Elements

You are here: Managing search profiles > Fields: Profiles > Fields: Configure Custom Page Elements

Fields: Configure Custom Page Elements

Path: Profiles > Configure Custom Page Elements

Configure Custom Page Elements lets you customize how Searching displays to patrons. You can specify a theme or custom CSS file, and default or custom banner content. A theme is a collection of one or more CSS files and related image files that defines the styles for elements that display in Searching. A theme allows you to extend or override existing styles that display by default in Searching. Additionally, you may create a custom CSS file to further customize the styles that display in Searching after a theme is applied.

In order to improve the performance of page loads, Portfolio sets the expiration dates of graphics, scripts, style sheets, and Flash components to expire at a far-future date. Because of that, Portfolio instructs the browser to use cached versions of these files instead of reloading them from the server. Therefore, when you add a new custom file to a page, name the file a unique name (such as a versioned file name), instead of an existing name. The consequence of using an existing name is that Portfolio will load the cached title other than the new file until the patron refreshes the browser cache.

If you have existing image files, style sheets, or content files you want to use, you can upload the files into the /custom directory on the Portfolio server. These files can then be specified in the fields on the Configure Custom Page Elements page to customize Searching.

You can also clear the values for all fields. Clearing the values from all fields clears any previously entered information and resets any settings to the default.

When you have finished entering data on the page, choose Finish to save your changes, or choose Cancel to discard your changes and return to Profiles.

You can setup multiple custom page elements settings for a single profile. Each set is associated with a language so you can specify the custom settings for each language within the profile. The elements may include graphics and text that correspond to the respective language. (For more information, see Fields: Choose Profile Language.)

The Discovery administrator database metadata is cached in the Discovery Server application. Any changes to search profiles will not be reflected to the patron in Searching until the metadata cache is refreshed. (For more information, see Refreshing the search cache.)

Profile

Displays the name and language of the profile for which you are configuring custom page elements.

Autofill Data From

Lets you copy the previously-defined values from any language. The list of languages that you can choose from is based on the languages that are configured for that search profile. The languages that display in the list are only those languages that have localized values defined.

Choose the language from which you want to copy values, then choose Autofill.

Note: If custom page elements are not configured for any other languages, this field and the Autofill button are inactive.

Note: You cannot select to autofill values from the current language.

To modify the languages configured for this search profile and change the language options in the drop-down list (such as adding or removing a specific language as an option), choose Previous on the Configure Custom Page Elements page to return to the Choose Profile Language page. (For more information, see Configuring languages for a search profile.)

Clear Field Values

Clears any values in all Custom Page Elements fields for the selected language. This clears any previously entered data and resets any settings to the default.

Preview

Choose Preview to display your custom page content in a browser window. The preview page displays the display elements as they will appear when deployed. From the Preview page, you can choose Back in your browser to return to the Configure Custom Page Elements page.

Styles

Specifies the theme and custom CSS file associated with this search profile.

Theme

Specifies the theme you want to apply to this search profile.

By default, the software includes some pre-configured themes, including those to match existing SirsiDynix products such as EPS and Horizon Information Portal.

To create a new theme and add it to the Theme drop-down list, choose Add Theme. (For details, see Creating a new theme.)

Note: The Add Theme link does not display if you do not have privileges to add themes.

By default, any new theme that you create will be automatically selected as the theme for the search profile that you are customizing.

Custom CSS

Specifies the relative or absolute URL (up to 256 characters) of the custom CSS file that you want to apply to this search profile. The URL points to the location where the CSS file is stored.

CSS files allow you to further customize the look and feel of page elements.

The root of a relative URL depends on your server configuration. Frequently, the root is the Tomcat “/webapps” directory. However, your system administrator may change the root by modifying application contents or, if your application server is fronted by a web server, by mapping URLs to other filesystem locations. Check with your system administrator for help with relative URLs.

Custom Page Content

If you want, you can customize the page content that displays in the search interface. You can specify custom Javascript, enable and configure patron help files, and configure Library Information.

Custom JavaScript URL

Specifies the location of a custom JavaScript file. A custom JavaScript file is any custom JavaScript code, written specifically for your library, that you want to load when Searching is displayed for a specific profile. Custom JavaScript will also load when patrons view the detail display for a library item. Using custom JavaScript code allows you to integrate additional content from content providers such as Google Books, GoodReads, or Library Thing for Libraries into Portfolio.

Note: You can declare a function called "customJavaScript" if you want your custom javascript to run after the entire page has loaded and is ready to be manipulated. Although you could declare javascript outside of that function it would be run at the time that it loads, and there is no guarantee that the elements you are attempting to manipulate will have loaded on the page.

You can also declare an additional function you called customDetailJavaScript that runs on item detail pages, both modal and non-modal. This should accept a single integer parameter that represents the index number of the detail on the page.

For example:

function customDetailJavaScript(detail)

{

alert($$('#isbn'+detail).value);

}

This sample code displays a popup after the detail has loaded that contain the ISBN number of the item in the detail.

If you would like the same script to run on your detail page and other pages, you can declare a function like such as the following:

function customDetailJavaScript(detail)

{

customJavaScript();

}

However, keep in mind that this would cause the custom javascript to re-execute each time a detail modal window opens.

Enable Patron Help Link

Specifies whether or not to enable patron help for a specific profile.

When you enable this feature, a Help link will display when users access that search profile. Clear the checkbox to turn off patron help for a profile.

Portfolio delivers basic Help content. If you want, you can create and upload your own Help, or host it on another server. (For more information, see Setting up patron help.)

This feature is automatically enabled for all delivered search profiles. It is also automatically enabled when you add a new search profile.

Custom Help URL

Specifies the URL (up to 256 characters) of your custom patron help.

You can create Help in any format your patrons can access (for example, HTML or PDF). If you host your Help on another server, your Custom Help URL would be something like:

http://library.example.com/searchhelp.html

If you choose to upload your Help to the Portfolio server, your Custom Help URL would be something like:

/custom/web/searchhelp.html

Note: The Custom Help URL field is enabled when Enable Patron Help Link is selected. If you clear Enable Patron Help Link, the Custom Help URL field will be disabled.

Note: Custom Help URL is optional. If you enable patron help link, but do not enter a Custom Help URL, the delivered patron help will display.

For more information, see Setting up patron help.

Library Information

Lets you create the content that will appear in the Library Information link in the profile header. The Content Area Editor is a WYSIWYG, HTML editor that works as a basic word processor. You can author in the graphic mode or change to the HTML mode to create and edit content.

Important: If you do not want the Library Information link to display, make sure the Content Area Editor is empty.

The buttons along the top of the editor give you quick access to various commands, most of which are common to HTML editors or word processors. You can use these command buttons:

Option	Description
Undo	Undoes the last action you made in successive order.
Redo	Redoes the last action you made in successive order.
Select text color	Lets you specify the color of the selected text.
Select background color	Lets you specify the color of the background.
Indent	Indents a selected paragraph or group of paragraphs.
Outdent	Moves an selected indented paragraph or group of paragraphs back out to the margin.
Cut	Cuts selected text and puts it on the clipboard for pasting.
Copy	Copies selected text and puts it on the clipboard for pasting.
Paste	Pastes the content of the clipboard directly into the editor at the insertion point. Because of differences in format, if you copied the content from a different program, the results of the paste may not be what you expect.
Paste as Plain Text	Strips any formatting from the contents of the clipboard as it pastes it into the content area editor. Formatting codes from other applications can cause the HTML to format improperly.
Paste from Word	Modifies any text copied from Word so that the format is displayed properly as HTML.
Bold	Applies a bold format to selected text.
Italic	Applies an italic format to selected text.
Underline	Underlines selected text.
Edit HTML Source	Opens the content in a text editor so you can work directly with the HTML code.
Unordered list	Lets you create an unordered (bulleted) list.
Ordered list	Lets you create an ordered (numbered) list.
Insert/Edit Image	Lets you specify the location and properties of an image file. All images must be identified by a URL. After inserting the path to the image, you can define appearance of the image in the text (a preview pane displays how the settings affect the image and text).
Insert/Edit Anchor	Specifies the location of an anchor in the current content area that you can link to from within the same area.
Insert/Edit Link	Lets you define a link to another web page. The page may be within or outside your system. Many of the settings require a good knowledge of HTML formatting
Unlink	Disables and removes the settings for the current link.

Patron Login Image

Specifies the image, such as a library logo, that library users see when logging in to their account. The image is placed at the top of the login box, and the login box adjusts to the size of the image. You can use the slider to adjust the size of the image before saving the settings.

Image URL

Specifies the path (up to 256 characters) to the image file that appears in the log in dialog box. The URL can reference any image on the Internet, or you can upload the image using the File Uploading utility, and copy the URL to the Image URL field.

Preview Image

Displays the image at the size it will appear in the Login dialog box.

Adjust Image Size

Specifies the size of the image as a percentage of the actual size. The slider can be adjusted between 5% and 100%. As you move the slider, the image resizes to show you the size the image will be when displayed in the login dialog box.

File Uploading

You can upload existing files to customize page content, patron help, headers, footers, and styles that display in Searching. After you upload a file to the /custom/web/ directory on the Portfolio server, the relative path to that file on the Portfolio server displays in the Uploaded File URL field. You can then copy and paste that path into the entry fields on this page. Using this method, you can quickly upload and use existing files for styles, banners, logos, patron help, or page content.

Choose File

Lets you browse for a file to upload to the Portfolio server. Type the file name in the entry field, or click Choose File to display the file browsing window. After you select a file to upload, Portfolio displays the path to that file in the entry field.

Upload

Copies the specified file to the /custom/web/ directory on the Portfolio server. Any files that you upload will remain on the server until they are deleted from the /custom/web/ directory. After you upload the file, the relative path to the uploaded file on the Portfolio server displays in the Uploaded File URL field.

Note: If you try to upload a file that has the same name as a file that already exists on the Portfolio server, the uploaded file is renamed when it is placed on the server to avoid overwriting the existing file. The renamed file will have a number added to the beginning of the original file name. For example, if you upload the logo.png file, and a file by that name already exists in the /custom/web/ directory on the server, the file you are uploading will be renamed to 1logo.png when it is placed on the server. The relative path name to the renamed file will be /custom/web/1logo.png.

Important: If you upload an HTML file that contains images, JavaScript, or CSS, you must separately upload those elements into the /custom/web/ directory.

Uploaded File URL

Displays the relative path as a link to the uploaded file on the Portfolio server. You can then do either of the following:

•

Copy and paste the path into the entry fields on this page.

•

Click the path to display the contents of the file in a separate window.

Note: Each time you upload a file, its relative path replaces the relative path of the previously-uploaded file in this field. To see a list of all files that have been uploaded and have not been deleted from the server, click the path displayed in the See All Uploaded Files field.

See All Uploaded Files

Displays the /custom/web/ directory path in which the uploaded files are placed on the Portfolio server. Click the path to display a list of the files in the /custom/web/ directory on the Directory Listings page.

Note: Only a user with admin privileges can access the Directory Listings page.